<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// ------------------------------用户搜索
const formInline = reactive({
    userId: '',
    vip: '',
    version: '',
    regst: 'all',
    reg: 'all',
    hot: 'all',
    dis: 'all',
    sup: 'all',
    dic: 'all',
    regTime: ''
})

const onSubmit = () => {
    console.log('submit!')
}
// ------------------------------用户数据
let users = reactive([
    {
        id: 40006, topic: '炫神', good: '114514',
        turn_out: '4396', review: '111',
        status: 1,
        handin: '2024-08-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    },
    {
        id: 40006, topic: 'last丶炫神', good: '114514',
        turn_out: '4396777', review: '1111',
        status: 1,
        handin: '2024-06-25 2:27:56',
        status: 0
    }
])

// ------------------------ 分页

const currentPage = ref(1)
const pageSize = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

// ---------------------- 删除用户操作
// 弹出二次确认对话框：参数user就是要删除的用户：
function deleteConfirm(user) {
    ElMessageBox.confirm(
        '确定要删除id:' + user.id + '用户的信息吗?',
        '警告信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用删除函数：删除用户
            deleteUser(user)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '管理员取消了删除操作',
            })
        })

}
function unpassConfirm(user) {
    ElMessageBox.confirm(
        '确定该id:' + user.id + '用户的信息不通过吗?',
        '警告信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用删除函数：删除用户
            deleteUser2(user)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '管理员取消了否决操作',
            })
        })

}

// 删除用户的函数：参数user就是要删除的用户
function deleteUser(user) {
    // 查询用户在数组中的索引
    let index = users.findIndex(item => item.id === user.id)
    // 删除用户数据
    users.splice(index, 1)
    // 提示删除成功
    ElMessage({
        type: 'success',
        message: '管理员成功删除了用户 ' + user.id,
    })
}
function deleteUser2(user) {
    // 查询用户在数组中的索引
    let index = users.findIndex(item => item.id === user.id)
    // 删除用户数据
    users.splice(index, 1)
    // 提示删除成功
    ElMessage({
        type: 'success',
        message: '管理员成功否决了用户 ' + user.id,
    })
} 
// function showinformation(user) {
//     let index = users.findIndex(item => item.id === user.id)
//     ElMessageBox.confirm(
//         'proxy will permanently delete the file. Continue?',
//         '评论信息',
//         {
//             confirmButtonText: 'OK',
//         }
//     )
//         .then(() => {
//             ElMessage({
//                 type: 'success',
//                 message: '查看结束',
//             })
//         })
// }



</script>
<template>

    <el-table :data="users" style="width: 100%">
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="分类名称" prop="topic" width="800" />
        <el-table-column label="状态" prop="status">
            <template #default="{ row }">
                <el-tag type="primary" v-if="row.status == 0">正常</el-tag>
                <el-tag type="danger" v-else-if="row.status == 1">异常</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" prop="operate" width="220" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button type="danger" size="small" @click="deleteConfirm(scope.row)">删除</el-button>
                    <el-button type="info" size="small"color="#123" plain @click="showinformation(scope.row)">编辑</el-button>
                </el-button-group>
            </template>
        </el-table-column>
        <!-- {
        id: 40006, username: 'wx_17765007861', nickname: 'Eluck', avator: '', phone: '',
        balance: 50, cumCon: 0, ticket: 0.00, cumTicket: 0,
        invitation: '2CE0F8', regDevice: 'android',
        regTime: '2024-08-26 10:08:02',
        lastLogin: '2024-08-26 12:30:12',
        lastIp: '223.104.205.215',
        status: 0
    } -->
    </el-table>

    <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 100px;
    font-size: 14px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-pagination {
    margin-top: 20px;
}
.el-table-column .button{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-header {
    display: flex;
    justify-content: space-between;
}
</style>